<template>
  <view class="address-container">
    <view class="header">
      <text class="title">收货地址</text>
      
    </view>
    
    <view class="address-list">
      <view v-for="item in product" :key="item._id" class="address-item" @click="selectaddress(item.id)">
        <view class="address-info">
          <text class="address-text">
            <text class="highlight">收货人{{ item.consignee }}</text>
            <text class="highlight">联系方式{{ item.phone }}</text>
          </text>
          <text class="address-detail">
            所在地区：{{ item.region }}详细地址：{{ item.address }}门牌号：{{ item.doorNumber }}
          </text>
        </view>
      
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      product: [],
      producted:[],
      token:""
    }
  },
  onShow() {
    this.query()
  },
  onLoad() {
    this.query()
  },
  methods: {
   selectaddress(id) {
  // 清空之前的选择
  this.producted = null;
  
  // 在数组中查找匹配的地址
  const selectedAddress = this.product.find(item => item.id === id);
  
  if (selectedAddress) {
    // 将选中的地址赋值给 producted
    this.producted = {...selectedAddress}; // 使用对象展开创建新对象
    console.log("选中地址:", this.producted);
    
    // 存储到本地
    uni.setStorageSync('producted', this.producted);
    
    // 跳转到支付页面
    uni.navigateTo({
      url: "/pages/pay/pay"
    });
  } else {
    console.error("未找到对应地址");
    uni.showToast({
      title: '选择地址失败',
      icon: 'none'
    });
  }
},
 
    query() {
      uni.request({
        url: 'http://localhost:3000/address',
        method: 'GET',
        header: {
          'Content-Type': 'application/json'
        },
        success: (res) => {
          console.log('请求成功:', res)
           this.token = uni.getStorageSync("token");
          this.product = res.data.filter(item => item.token === this.token);
        }
      })
    }
  }
}
</script>

<style>
.address-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.add-btn {
  background-color: #07c160;
  color: white;
  border: none;
  border-radius: 50rpx;
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
}

.address-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.address-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.address-item:last-child {
  border-bottom: none;
}

.address-info {
  margin-bottom: 20rpx;
}

.address-text {
  display: block;
  font-size: 32rpx;
  margin-bottom: 15rpx;
}

.highlight {
  margin-right: 30rpx;
  font-weight: bold;
}

.address-detail {
  display: block;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.action-btns {
  display: flex;
  justify-content: flex-end;
}

.edit-btn, .delete-btn {
  padding: 8rpx 25rpx;
  border-radius: 6rpx;
  font-size: 26rpx;
  margin-left: 20rpx;
}

.edit-btn {
  color: #07c160;
  border: 1rpx solid #07c160;
}

.delete-btn {
  color: #ff4d4f;
  border: 1rpx solid #ff4d4f;
}
</style>